<!--
 * @PageName: 
 * @Description: 发起人创建表单、编辑表单
 * @FilePath: /glm-mes-pc/src/views/Demo/components/createFormDialog.vue
-->
<template>
	<el-dialog v-model="visible" width="800px" class="comm-dialog distributors-dialog">
		<template #header>
			<div>
				<span class="title">{{ editId ? '编辑表单' : '创建表单' }}</span>
			</div>
		</template>
		<el-form ref="dialogFormRef" inline :model="dialogForm" :rules="dialogRules">
			<el-form-item label="发起人" prop="initiatorName" label-width="120px">
				<el-input v-model="dialogForm.initiatorName" placeholder="请输入发起人" disabled style="width: 214px"></el-input>
			</el-form-item>
			<el-form-item label="紧急程度" prop="urgencyLevel" label-width="120px">
				<el-radio-group v-model="dialogForm.urgencyLevel">
					<el-radio :label="0">正常</el-radio>
					<el-radio :label="1">重要</el-radio>
					<el-radio :label="2">紧急</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="部门" prop="initiatorDept" label-width="120px">
				<el-select v-model="dialogForm.initiatorDept" placeholder="请选择部门" disabled>
					<el-option v-for="(item, index) in userStore.deptList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="款号" prop="materialCode" label-width="120px">
				<el-input v-model.trim="dialogForm.materialCode" placeholder="请输入款号" style="width: 214px" @blur="getStyleNameList"></el-input>
			</el-form-item>

			<el-form-item label="业务员" prop="initiatorName" label-width="120px">
				<el-input v-model="dialogForm.initiatorName" placeholder="请输入业务员" style="width: 214px" disabled></el-input>
			</el-form-item>

			<el-form-item label="款式名称" prop="styleName" label-width="120px">
				<el-input v-model="dialogForm.styleName" placeholder="请输入款式名称" style="width: 214px"></el-input>
			</el-form-item>

			<el-form-item label="成衣类型" prop="clothingType" label-width="120px">
				<el-select v-model="dialogForm.clothingType" placeholder="请选择成衣类型" @change="clothingTypeChange">
					<el-option :value="0" label="3D样衣"></el-option>
					<el-option :value="1" label="实际样衣"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="留底样品" prop="sampleRetention" label-width="120px">
				<el-select v-model="dialogForm.sampleRetention" placeholder="请选择留底样品">
					<el-option :value="0" label="有"></el-option>
					<el-option :value="1" label="无"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="是否做样衣" prop="makeSample" label-width="120px">
				<el-select v-model="dialogForm.makeSample" placeholder="请选择是否做样衣">
					<el-option :value="0" label="是"></el-option>
					<el-option :value="1" label="否"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="备注" prop="remark" label-width="120px">
				<!-- 富文本示例 -->
				<Editor v-model="dialogForm.remark" :minHeight="400" style="height: 400px; overflow-y: auto" />
			</el-form-item>
		</el-form>
		<!-- 页脚 -->
		<template #footer>
			<div>
				<el-button @click="visible = false">取消</el-button>
				<!-- 驳回状态的数据编辑时不显示提交按钮 -->
				<el-button type="primary" @click="confirm" :loading="confirmLoading">提交</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { workSaveRequestAPI, workDoStatusRequestAPI, getStyleNameListAPI, workUpdateRequestAPI, getWorkFormByIdAPI } from '@/api/sampleSalesOrder'
import { selectDeptAPI } from '@/api/demandManagement.js'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
import { parseTime } from '@/utils/ruoyi.js'

const emit = defineEmits(['update:dialogVisible'])
const { proxy } = getCurrentInstance()
let props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	}
})

const dialogForm = ref({
	// 发起人名
	initiatorName: userStore.nickName,
	// 发起人账号
	initiatorId: userStore.name,
	// 紧急程度 0正常1重要2紧急
	urgencyLevel: 0,
	// 发起人部门id
	initiatorDept: String(userStore.deptData.deptId),
	initiatorDeptName: userStore.deptData.deptName,
	// 款号
	materialCode: '',
	// 款式名称
	styleName: '',
	// 成衣类型 03D样衣1实际样衣
	clothingType: 0,
	// 留底样品 0有1无
	sampleRetention: 1,
	// 是否做样衣 0是1否
	makeSample: 1,
	saleOrderId: '',
	remark: ''
})
const dialogRules = ref({
	urgencyLevel: [{ required: true, message: '请选择紧急程度', trigger: 'change' }],
	materialCode: [{ required: true, message: '请输入款号', trigger: 'blur' }],
	styleName: [{ required: true, message: '请输入款式名称', trigger: 'blur' }],
	clothingType: [{ required: true, message: '请选择成衣类型', trigger: 'change' }],
	sampleRetention: [{ required: true, message: '请选择留底样品', trigger: 'change' }],
	makeSample: [{ required: true, message: '请选择是否做样衣', trigger: 'change' }]
})
const confirmLoading = ref(false)
const dialogFormRef = ref(null)
const visible = computed({
	get() {
		return props.dialogVisible
	},
	set(value) {
		// 只触发1次set函数
		if (props.dialogVisible !== value) {
			emit('update:dialogVisible', false)
		}
	}
})

const rowInfo = ref({})
// 根据是否有id判断创建还是编辑
const handleFormData = (row) => {
	rowInfo.value = row
	if (row && row.id) {
		// 编辑时调用接口回显
		getFormById(row.id)
	} else {
		rowInfo.value = null
		editId.value = null
		// 创建时重置表单
		proxy.$refs.dialogFormRef?.resetFields()
	}
}
defineExpose({
	handleFormData
})

const editId = ref(null)

/* 成衣类型改变：3D样衣默认留底样品为无，是否做样品为否 */
const clothingTypeChange = (val) => {
	if (val === 0) {
		dialogForm.value.sampleRetention = 1
		dialogForm.value.makeSample = 1
	} else {
		dialogForm.value.sampleRetention = null
		dialogForm.value.makeSample = null
	}
}

// 获取表单数据进行编辑
const getFormById = async (id) => {
	editId.value = id
	const res = await getWorkFormByIdAPI(id)
	dialogForm.value = res.data
}

const saveLoading = ref(false)

/* 根据款号获取款式列表 */
const getStyleNameList = async () => {
	dialogForm.value.styleName = ''
	if (dialogForm.value.materialCode) {
		const res = await getStyleNameListAPI({
			code: dialogForm.value.materialCode
		})
		if (res.code === 200) {
			dialogForm.value.styleName = res.data
		}
	}
}

const confirm = async () => {}
</script>

<style lang="scss" scoped></style>
